<template>
    <div><br>
  <el-form v-model="drugDistributionDTO" label-width="80px">
        <el-form-item label="病人名字">
                <el-input :value="patient.name"></el-input>
            </el-form-item>
            <el-form-item label="开药医生">
                <el-input :value="doctor.docName"></el-input>
            </el-form-item>
        <el-form-item label="药名">
            <el-select
                v-model="drugDetail.dsName"
                filterable
                remote
                :remote-method="remoteSearch"
                placeholder="请输入药品名称"
                clearable
                @change="handleSelectionChange"
            >
                <el-option
                v-for="item in options"
                :key="item.id"
                :label="`${item.dsName} —— ￥${item.dsOutPrice}——库存:${item.dsStock}`"
                :value="item"
                />
            </el-select>
        </el-form-item>
        <el-form-item  label="药品数量">
            <el-input-number v-model="mdNum" @change="addDrugDetail" :min="0" :max="50" label="药品数量"></el-input-number>
        </el-form-item>
        <el-form-item v-model="drugDetails">
            <!-- 用药明细的表格数据 -->
            <el-table
            :data="drugDetails"
            style="width: 100%">
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="mdName" label="药名" width="180"></el-table-column>
            <el-table-column prop="mdNum" label="药品数量"></el-table-column>
            <el-table-column prop="mdBuyPrice" label="药品单价"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.$index)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        </el-form-item>
        <el-form-item>
            <el-button type="warning" size="mini" @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" size="mini" @click="addDrugItem">确定</el-button>
        </el-form-item>
    </el-form>
    <span style="color: red;">{{ msg }}</span>
    </div>
</template>

<script>
export default {
    props: {
         caseId:{
             type: Number,
             required: true
         }
     },
     data(){
         return{
            doctor:{},
            patient:{},
            drugDistributionDTO:{},//开药 和 用药明细 发送到后端的对象
            drugDetails:[],//用药明细对象的数组
            drugDetail:{},//用药明细对象
            options:[],//药品数组
            msg:'',
            mdNum:''//药品数量
         }
     },
     methods:{
        // 远程搜索方法
        remoteSearch(query) {
        // 在这里执行远程搜索，获取匹配的药品列表
        // 分页加条件查询展示
        let drug = {};
        drug.dsName = query;
        this.$axios.post('api/drug/queryDrugList', drug)
            .then(res => {
                console.log(query)
            if (res.data.code === 200) {
                this.options= res.data.data;
                drug.dsName=''
          }
        })
        },
        // 处理选项变化事件
        handleSelectionChange(value) {
        console.log('选中的药品值：', value);
        // 在这里可以根据选中的药品值执行相应的操作
        this.drugDetail=value;
        // console.log('选中的药品值：',  this.drugDetail);
        // this.options=[]
        },
        //添加用药明细数组
        addDrugDetail(value){
            console.log('添加用药明细数组：', value);
            if(value==null || value==''){
                this.$message.warning("请选择药品数量")
                return
            }
            let drugDetailNew={}
            drugDetailNew.mdBuyPrice=this.drugDetail.dsOutPrice//药品售价
            drugDetailNew.mdName=this.drugDetail.dsName//药品名字
            drugDetailNew.mdDrugstoreId=this.drugDetail.id//药品id
            // 检查是否存在相同 ID 的 drugReturnDetail
            const exists = this.drugDetails.some(item => item.mdDrugstoreId === drugDetailNew.mdDrugstoreId);
            if (!exists) {
                drugDetailNew.mdNum=value
                this.drugDetails.push(drugDetailNew)
            }else{
                this.$message({
                    showClose: false,
                    message:"不能重复添加同一种药品，如需修改，请删除该条数据重新添加",
                    type:'warning'
                });
            }
        },
         //开药及药品明细
         addDrugItem(){

            if(this.drugDetails.length==0){
                this.msg='请选择药品'
                return
            }

            this.drugDistributionDTO.ppCaseId=this.patient.id//病人id
            this.drugDistributionDTO.ppWorkerId=this.doctor.id//医生id
            //药品明细
            this.drugDistributionDTO.drugDetails=this.drugDetails

            this.$axios.post("api/doctor/addDrugDistribution",this.drugDistributionDTO)
            .then(res=>{
                if(res.data.code==200){
                    this.$message.success("开药成功，请患者前去缴费")
                    this.drugDistributionDTO={}
                    this.drugDetails=[]
                    this.closeDialogWithData()
                }
            })
        },
         //查找医生信息
         queryDoctor(){
         this.$axios.get("api/doctor/queryDoctor")
         .then(res=>{
             if(res.data.code==200){
                 this.doctor=res.data.data;
             }
         })
         },
         //查找病人信息
         queryPatient(){
             this.$axios.get("api/doctor/queryPatient/"+this.caseId)
             .then(res=>{
             if(res.data.code==200){
                 this.patient=res.data.data;
                 console.log(this.patient)
             }
         }) 
         },
         closeDialogWithData() {
             // 触发事件并传递数据给父组件
             this.$emit('closeDialog', this.caseId); // 替换 dataToPass 为你想要传递的数据
         },
         deleteRow(index) {
            // 从 drugDetails 数组中移除指定索引的行数据
            this.drugDetails.splice(index, 1);
            console.log(this.drugDetails)
        }
     },
     created(){},
     mounted(){
         this.queryDoctor()
         this.queryPatient()
     }
}
</script>

<style>

</style>